<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">安全管理台账,设备设施台账</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="姓名">
                            <el-input placeholder="请输入" v-model="param.name"></el-input>
                        </el-form-item>
                        <el-form-item label="类型">
                            <el-select v-model="param.employeeType" placeholder="请选择">
                                <el-option label="请选择" value=""></el-option>
                                <el-option label="教师" value="1"></el-option>
                                <el-option label="职工" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="addBtn">新增职工</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="staffTable" :stripe="true" :border="true" size="mini" style="width: 100%;"
                          height="500">
                    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="employeeType" label="类型" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.employeeType == 1">
                                教师
                            </template>
                            <template v-if="scope.row.employeeType == 2">
                                职工
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cardNo" label="证件号" align="center"></el-table-column>
                    <el-table-column prop="identifyId" label="身份证号" align="center"></el-table-column>
                    <el-table-column prop="sex" label="性别" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.sex == '1'">
                                女
                            </template>
                            <template v-if="scope.row.sex == '0'">
                                男
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="headIcon" label="照片" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.headIcon">
                                <el-popover
                                        placement="right"
                                        width="300"
                                        trigger="hover"
                                        popper-class="popClass">
                                    <img :src="imageUrl+scope.row.headIcon"
                                         style="max-width:600px;max-height: 380px "/>
                                    <img :src="imageUrl+scope.row.headIcon" slot="reference"
                                         style="max-width:80px;max-height: 80px "/>
                                </el-popover>
                            </template>

                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="editBtn(scope.row)">修改
                            </el-button>
                            <el-button type="primary" size="mini" icon="el-icon-delete" @click="del_staffs(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="param.pagesize" :total="totalCount"
                                   :current-page.sync="param.pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>


        <el-dialog
                width="40%"
                title="新增信息"
                :visible.sync="addVisible" :close-on-click-modal="false">

            <el-form :model="stuForm" ref="stuForm">

                <el-form-item label="姓名" prop="Name" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入姓名,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="stuForm.Name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="Sex" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入性别,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="stuForm.Sex" placeholder="请选择">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="employeeType" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入类型,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="stuForm.employeeType" placeholder="请选择">
                        <el-option label="教师" value="1"></el-option>
                        <el-option label="职工" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号" prop="cardNo" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入证件号,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="stuForm.cardNo" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="身份证号" prop="identifyId " :label-width="formLabelWidth">
                    <el-input v-model="stuForm.identifyId " autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="照片上传" :label-width="formLabelWidth">
                    <el-upload
                            class="upload-demo"
                            list-type="picture"
                            ref="upload1"
                            :action="url+'/api/idm/v1/employee/Add'"
                            :auto-upload="false"
                            :headers="headers"
                            name="headIconImg"
                            :data="stuForm"
                            :on-change="fileChange"
                            :on-success="onSuccess1"
                            :on-error="onError"
                            limit="1">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传一张jpg/png文件，</div>
                    </el-upload>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveStu">确 定</el-button>
            </div>

        </el-dialog>


        <el-dialog
                width="40%"
                title="编辑信息"
                :visible.sync="editVisible" :close-on-click-modal="false">

            <el-form :model="stuForm" ref="stuForm">

                <el-form-item label="姓名" prop="name" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入姓名,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="stuForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入性别,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="stuForm.sex" placeholder="请选择">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="employeeType" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入类型,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="stuForm.employeeType" placeholder="请选择">

                        <el-option label="教师" value="1"></el-option>
                        <el-option label="职工" value="2"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="证件号" prop="cardNo" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入证件号,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="stuForm.cardNo" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="身份证号" prop="identifyId " :label-width="formLabelWidth"
                >
                    <el-input v-model="stuForm.identifyId " autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="照片上传" :label-width="formLabelWidth">
                    <el-upload
                            class="upload-demo"
                            list-type="picture"
                            ref="upload2"
                            :action="url+'/api/idm/v1/employee/Update'"
                            :auto-upload="false"
                            :headers="headers"
                            name="headIconImg"
                            :data="stuForm"
                            :on-change="fileChange"
                            :on-success="onSuccess2"
                            :on-error="onError"
                            limit="1">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传一张jpg/png文件，</div>
                    </el-upload>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateStu">确 定</el-button>
            </div>

        </el-dialog>


    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            url: SiteConfig.webApiset,
            staffTable: [],
            param: {
                name: '',
                employeeType: '',
                pagesize: 10,
                pageno: 1,
                projectNo: SiteConfig.account.projectNo
            },
            stuForm: {},
            totalCount: 0,
            headers: {},
            addVisible: false,
            editVisible: false,
            fileList: [],
            formLabelWidth: '120px',
        },
        created: function () {
            $('.page').show();
        },
        methods: {
            search() {
                this.getStaffs();
            },
            addBtn() {
                this.addVisible = true;
                this.stuForm = {};
            },
            editBtn(row) {
                this.editVisible = true;
                this.stuForm = {
                    projectNo: row.projectNo,
                    name: row.name,
                    classId: row.classId,
                    employeeType: row.employeeType + '',
                    cardNo: row.cardNo,
                    identifyId: row.identifyId,
                    sex: row.sex,
                    id: row.id
                }
            },
            onChangePage(page) {
                this.param.pageno = page;
                this.getStaffs();
            },
            del_staffs(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    HttpUtil.get('employee/Delete', {Id: row.id}).success((r) => {
                        if (r.state == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getStaffs();
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            saveStu() {
                this.$refs.stuForm.validate((valid) => {
                    if (valid) {
                        if (this.fileList.length == 0) {
                            this.$message({
                                type: 'info',
                                message: '必须选择图片'
                            });
                            return;
                        }
                        ;
                        const regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                        if (!regIdCard.test(this.stuForm.identifyId) && this.stuForm.identifyId) {

                            this.$message({
                                type: 'warning',
                                message: '身份证号填写有误'
                            });
                            return;
                        }

                        this.stuForm.classId = 1;
                        this.stuForm.projectNo = SiteConfig.account.projectNo;
                        this.$refs.upload1.submit();
                    }
                })
            },
            updateStu() {
                this.$refs.stuForm.validate((valid) => {
                    if (valid) {
                        const regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                        if (!regIdCard.test(this.stuForm.identifyId) && this.stuForm.identifyId) {

                            this.$message({
                                type: 'warning',
                                message: '身份证号填写有误'
                            });
                            return;
                        }
                        if (this.fileList.length == 0) {

                            HttpUtil.get('employee/Update', this.stuForm).success((r) => {
                                if (r.state == 0) {
                                    this.$message({
                                        message: '修改成功！',
                                        type: 'success'
                                    });
                                    this.editVisible = false;
                                    this.stuForm = {};
                                    this.fileList = [];
                                    this.getStaffs();
                                }
                            })
                        } else {
                            this.$refs.upload2.submit();

                        }
                    }
                })

            },
            fileChange(file, fileList) {
                this.fileList = fileList
            },
            onSuccess1(res) {
                if (res.state == 0) {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                    this.addVisible = false;
                    this.editVisible = false;
                    this.$refs.upload1.clearFiles();

                    this.fileList = [];
                    this.stuForm = {};
                    this.getStaffs();
                } else {
                    this.$message({
                        type: 'error',
                        message: '报错!' + res.errMsg
                    });
                }
            },
            onSuccess2(res) {
                if (res.state == 0) {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                    this.addVisible = false;
                    this.editVisible = false;
                    this.$refs.upload2.clearFiles();

                    this.fileList = [];
                    this.stuForm = {};
                    this.getStaffs();
                } else {
                    this.$message({
                        type: 'error',
                        message: '报错!' + res.errMsg
                    });
                }
            },
            onError(err) {
                this.$message({
                    type: 'error',
                    message: '报错!' + err.errMsg
                });
            },
            getStaffs() {
                HttpUtil.get('employee/List', this.param).success((r) => {
                    this.staffTable = r.data;
                    this.totalCount = r.total;
                })
            }
        },

        mounted: function () {
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            };
            this.getStaffs();
            this.imageUrl = SiteConfig.webApiset;
        }
    });
</script>
</body>
</html>
